/* eslint-disable object-shorthand */
import React from 'react';
import {Spin, Card, Button, Row, Col, Table, Form, Popconfirm, Checkbox, Icon, Badge, Modal, Message as msg} from 'antd';
import PropTypes from 'prop-types';
import routes from './routes';
import {FORM_OPTIONS, TABLE, FIXED_COLUMN_WIDTH, FORM_ROW_OPTIONS} from '../constants';
import {getDetail, updateApplyReport} from './api';
import {formatAmount, conventEnumValueToString} from '../utils';
import PartMultiSelectPanel from './PartMultiSelectPanel';
import PartSelectPanel from './PartSelectPanel';
import VehicleSelectPanel from './VehicleSelectPanel';
import DutyDealerSelectPanel from './DutyDealerSelectPanel';
import DealerSelectPanel from './DealerSelectPanel';
import ProductSearchPanel from './ProductSearchPanel';
import ProductCategorySearchPanel from './ProductCategorySearchPanel';
import {serviceType, chargeMode, conditionName, operator} from '../Enum';
import {serviceActivityScope} from './constants';
import TextInput from 'Shared/components/TextInput';
import WrappedDatePicker from '../common/WrappedDatePicker';
import InputAmount from '../common/InputAmount';
import {injectIntl} from './intl';
import WrappedSelect from '../common/WrappedSelect';
import LocalizeInputNumber from '../common/LocalizeInputNumber';
import WrappedInputNumber from '../common/WrappedInputNumber';
import {uuid} from './utils';
import SearchInput from 'Shared/components/SearchInput';
import WrappedSwitch from '../common/WrappedSwitch';
import styles from './style.css';
import Return from '../common/Return';
import FileImport from './FileImport';
import {newOrUpdateOrderValidator} from './validator';
const FormItem = Form.Item;

const typeOptions = serviceType.toList();
const modeOptions = chargeMode.toList();
const scopeOptions = serviceActivityScope.toList();
const conditionNameOptions = conditionName.toList();
const operatorOptions = operator.toList();
const autosize = {minRows: 1};
class UpdatePanel extends React.PureComponent {
    state = {
        loading: false,
        hasOperat: false,
        isValidate: false,
        showPartMultiSelectPanel: false,
        showSelectPartPanel: false,
        showVehicleSelectPanel: false,
        showSelectDutyDealerPanel: false,
        showSelectDealerPanel: false,
        showProductSelectPanel: false,
        showCategorySelectPanel: false,
        showImportPanel: false,
        data: {},
        materials: [],
        workItems: [],
        vehicles: [],
        conditions: [],
        dealerQuotas: [],
        usedPartId: '',
        id: '',
        currentId: ''
    }
    componentDidMount() {
        const id = this.props.id;
        this.setState({loading: true});
        getDetail(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data,
                        materials: res.data.materials,
                        workItems: res.data.workItems,
                        vehicles: res.data.vehicles,
                        conditions: res.data.conditions,
                    });
                else
                    this.setState({loading: false});
            });
    }
    componentWillUnmount() {
        this.isunmount = true;
    }
    onChange = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }
    onClickOkOnPopconfirm = () => {
        this.props.onCancel();
    }
    onSubmit = () => {
        const data = this.state.data;
        const materials = this.state.materials;
        const workItems = this.state.workItems;
        const vehicles = this.state.vehicles;
        const conditions = this.state.conditions;
        const dealerQuotas = this.state.dealerQuotas;
        const isValid = newOrUpdateOrderValidator(data, materials, workItems, vehicles, conditions, dealerQuotas);
        if(!isValid) {
            this.setState({
                isValidate: true
            });
            return;
        }
        const condition = {
            serviceName: data.serviceName,
            serviceType: data.serviceType,
            content: data.content,
            chargeMode: data.chargeMode,
            frequency: data.frequency,
            isRestrictedQuantity: data.isRestrictedQuantity,
            serviceQuantity: data.serviceQuantity,
            laborFee: data.laborFee,
            materialFee: data.materialFee,
            otherFee: data.otherFee,
            needMgmtFee: data.needMgmtFee,
            scope: data.scope,
            startTime: data.startTime,
            endTime: data.endTime,
            remark: data.remark,
            rowVersion: data.rowVersion,
            materials: materials.map(v => ({
                id: v.id,
                usedPartId: v.usedPartId,
                newPartId: v.newPartId,
                price: v.price,
                quantity: v.quantity,
                isCaused: v.isCaused,
            })),
            workItems: workItems.map(v => ({
                partId: v.partId,
                workItemId: v.workItemId,
            })),
            vehicles: vehicles.map(v => ({
                vin: v.vin,
                dutyDealerId: v.dutyDealerId,
            })),
            conditions: conditions.map(v => ({
                conditionName: v.conditionName,
                operator: v.operator,
                value: v.value,
                conditionValues: v.conditionValues,
            })),
            // dealerQuotas: dealerQuotas.map(v => ({
            //     dealerId: v.dealerId,
            //     quota: v.quota,
            // })),
        };
        this.setState({loading: true});
        updateApplyReport(condition).then(res => {
            if(res.ok)
                this.props.successReturn();
            if(!this.isunmount)
                this.setState({loading: false});
        });
    }
    onClickAddMaterialBtn = () => {
        this.setState({
            showPartMultiSelectPanel: !this.state.showPartMultiSelectPanel
        });
    }
    onClickAddVehicleBtn = () => {
        this.setState({
            showVehicleSelectPanel: !this.state.showVehicleSelectPanel
        });
    }
    onClickAddDealerBtn = () => {
        this.setState({
            showSelectDealerPanel: !this.state.showSelectDealerPanel
        });
    }
    onClickAddConditionBtn = () => {
        const conditions = this.state.conditions;
        this.setState({
            conditions: [
                ...conditions,
                {
                    id: uuid(),
                }
            ]
        });
    };
    onShowProductSelectPanel = e => {
        this.setState({
            showProductSelectPanel: !this.state.showProductSelectPanel,
            currentId: e && e.target && e.target.dataset ? e.target.dataset.id : ''
        });
    }
    onShowCategorySelectPanel = e => {
        this.setState({
            showCategorySelectPanel: !this.state.showCategorySelectPanel,
            currentId: e && e.target && e.target.dataset ? e.target.dataset.id : ''
        });
    }
    onSelectMaterials = value => {
        const materials = this.state.materials;
        const workItems = this.state.workItems;
        value.map(p => {
            const material = this.state.materials.find(d => d.id === p.id);
            if(!material) {
                const material = {
                    id: p.id,
                    usedPartId: p.id,
                    usedPartCode: p.code,
                    usedPartName: p.name,
                    newPartId: p.id,
                    newPartCode: p.code,
                    newPartName: p.name,
                    price: p.price,
                    quantity: 1,
                    isCaused: p.isCaused,
                };
                materials.push(material);
                p.workItems.forEach(v => {
                    const index = workItems.findIndex(o => o.id === v.id);
                    if(index === -1)
                        workItems.push({
                            partId: p.id,
                            partCode: p.code,
                            workItemId: v.id,
                            workItemCode: v.code,
                            workItemName: v.name,
                            laborHour: v.laborHour,
                        });
                });
            }
            return p;
        });
        this.setState({
            showPartMultiSelectPanel: false,
            hasOperat: true,
            materials
        });
    }
    onSelectVehicleSolds = value => {
        const vehicles = this.state.vehicles;
        value.map(p => {
            const vehicle = this.state.vehicles.find(d => d.id === p.id);
            if(!vehicle) {
                const vehicle = {
                    id: p.id,
                    vin: p.vin,
                };
                vehicles.push(vehicle);
            }
            return p;
        });
        this.setState({
            showVehicleSelectPanel: false,
            hasOperat: true,
            vehicles
        });
    }
    onSelectProductData = (value, currentId) => {
        const condition = this.state.conditions.find(d => d.id === currentId);
        condition.conditionValues = value;
        this.setState({
            showProductSelectPanel: false,
            hasOperat: true
        });
    }
    onSelectCategoryData = (value, currentId) => {
        const condition = this.state.conditions.find(d => d.id === currentId);
        condition.conditionValues = value;
        this.setState({
            showCategorySelectPanel: false,
            hasOperat: true
        });
    }
    onDeleteMaterialAll = () => {
        this.setState({
            materials: [],
            workItems: [],
            hasOperat: true
        });
    }
    onDeleteMaterialDetail = record => {
        const materials = this.state.materials.filter(p => p.id !== record.id);
        this.setState({
            materials,
            hasOperat: true
        });
        const details = this.state.workItems.filter(d => d.partId !== record.usedPartId);
        this.setState({
            workItems: [...details],
            hasOperat: true
        });
    }
    onDeleteVehicleAll = () => {
        this.setState({
            vehicles: [],
            hasOperat: true
        });
    }
    onDeleteVehicleDetail = record => {
        const vehicles = this.state.vehicles.filter(p => p.id !== record.id);
        this.setState({
            vehicles,
            hasOperat: true
        });
    }
    onDeleteConditionAll = () => {
        this.setState({
            conditions: [],
            hasOperat: true
        });
    }
    onDeleteConditionDetail = record => {
        const conditions = this.state.conditions.filter(p => p.id !== record.id);
        this.setState({
            conditions,
            hasOperat: true
        });
    }
    onDeleteDealerQuotaAll = () => {
        this.setState({
            dealerQuotas: [],
            hasOperat: true
        });
    }
    onDeleteDealerQuotaDetail = record => {
        const dealerQuotas = this.state.dealerQuotas.filter(p => p.id !== record.id);
        this.setState({
            dealerQuotas,
            hasOperat: true
        });
    }
    
    onSelectParts = value => {
        const materials = this.state.materials;
        const usedPartId = this.state.usedPartId;
        const tmp = materials.map(item => {
            if(item.usedPartId === usedPartId)
                return Object.assign({}, item, {
                    newPartId: value.id,
                    newPartCode: value.code,
                    newPartName: value.name
                });
            return item;
        });
        this.setState({
            materials: tmp,
            hasOperat: true,
            showSelectPartPanel: false
        });
    };
    onSelectDutyDealers = value => {
        const vehicles = this.state.vehicles;
        const id = this.state.id;
        const tmp = vehicles.map(item => {
            if(item.id === id)
                return Object.assign({}, item, {
                    dutyDealerId: value.id,
                    dutyDealerCode: value.code,
                    dutyDealerName: value.name,
                });
            return item;
        });
        this.setState({
            vehicles: tmp,
            hasOperat: true,
            showSelectDutyDealerPanel: false
        });
    };
    onSelectDealers = value => {
        const dealerQuotas = this.state.dealerQuotas;
        value.map(p => {
            const dealer = this.state.dealerQuotas.find(d => d.id === p.id);
            if(!dealer) {
                const dealer = {
                    id: p.id,
                    dealerCode: p.code,
                    dealerName: p.name,
                    quota: p.quota,
                };
                dealerQuotas.push(dealer);
            }
            return p;
        });
        this.setState({
            showSelectDealerPanel: false,
            hasOperat: true,
            dealerQuotas
        });
    }
    onClickAddNewPartBtn = usedPartId => {
        this.setState({
            usedPartId,
            showSelectPartPanel: true
        });
    };
    onClickAddNewDealerBtn = id => {
        this.setState({
            id,
            showSelectDutyDealerPanel: true
        });
    };
    onClosePartSelectPanel = () => {
        this.setState({
            showSelectPartPanel: false
        });
    };
    onCloseDutyDealerSelectPanel = () => {
        this.setState({
            showSelectDutyDealerPanel: false
        });
    };
    onCloseDealerSelectPanel = () => {
        this.setState({
            showSelectDealerPanel: false
        });
    };
    onDeleteWorkItem = e => {
        const id = e.target.dataset.id;
        const details = this.state.workItems.filter(d => d.workItemId !== id);
        this.setState({
            workItems: [...details],
            hasOperat: true
        });
    };
    onUpdateConditionName=(value, id) => {
        const conditions = this.state.conditions || [];
        const tmp = conditions.map(d => {
            if(d.id === id)
                return Object.assign({}, d, {
                    id,
                    conditionName: value,
                    operator: value === conditionName.产品编号 || value === conditionName.产品分类 ? operator.等于 : null,
                    value: '',
                    conditionValues: []
                });
            return d;
        });
        this.setState({
            conditions: tmp,
            hasOperat: true
        });
    }
    onUpdateOperator = (value, id) => {
        const conditions = this.state.conditions || [];
        const tmp = conditions.map(d => {
            if(d.id === id)
                return Object.assign({}, d, {
                    id,
                    operator: value
                });
            return d;
        });
        this.setState({
            conditions: tmp,
            hasOperat: true
        });
    }
    onUpdateDateValue = (value, id) => {
        const conditions = this.state.conditions || [];
        const tmp = conditions.map(d => {
            if(d.id === id)
                return Object.assign({}, d, {
                    id,
                    value: value
                });
            return d;
        });
        this.setState({
            conditions: tmp,
            hasOperat: true
        });
    }
    onCausedCheck = e => {
        const materials = this.state.materials;
        const usedPart = this.state.materials.findIndex(v => v.isCaused === true);
        if(e.target.checked === true && usedPart !== -1)
            return msg.warn(this.props.intl.formatMessage({
                id: 'updatePanel.message.isCaused',
                defaultMessage: '已经存在主损件，请先取消已有的主损件！'
            }));
        const isCaused = e.target.checked;
        const tmp = materials.map(item => {
            if(item.usedPartId === e.target.id)
                return Object.assign({}, item, {
                    isCaused
                });
            return item;
        });
        this.setState({
            materials: tmp,
            hasOperat: true
        });
    };
    onUpdateQuantity = (quantity, id) => {
        const materials = this.state.materials || [];
        const tmp = materials.map(d => {
            if(d.usedPartId === id)
                return Object.assign({}, d, {
                    quantity,
                });
            return d;
        });
        this.setState({
            materials: tmp,
            hasOperat: true
        });
    }
    onShowImportSelectPanel=() => {
        this.setState({showImportPanel: !this.state.showImportPanel});
    }
    
    onCheckVin=data => {
        this.setState({showImportPanel: false});
        this.props.selectVehicles(data);
    }

    render() {
        const {formatMessage} = this.props.intl;
        const {data, materials, workItems, vehicles, dealerQuotas, conditions, isValidate, loading} = this.state;
        const materialColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.usedPartCode',
                    defaultMessage: '旧件编号'
                }),
                dataIndex: 'usedPartCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.usedPartName',
                    defaultMessage: '旧件名称'
                }),
                dataIndex: 'usedPartName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.isCaused',
                    defaultMessage: '是否主损件'
                }),
                dataIndex: 'isCaused',
                render: (text, record) => (
                    <Checkbox
                        checked={record.isCaused}
                        name="isCaused"
                        id={record.usedPartId}
                        value={record.isCaused}
                        onChange={this.onCausedCheck}>
                    </Checkbox>
                )
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.newPartCode',
                    defaultMessage: '新件编号'
                }),
                dataIndex: 'newPartCode',
                render: (text, record) => (
                    <SearchInput
                        disabled={true}
                        value={record.newPartCode}
                        id={record.usedPartId}
                        onClickSearchBtn={() => this.onClickAddNewPartBtn(record.usedPartId)} />)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.newPartName',
                    defaultMessage: '新件名称'
                }),
                dataIndex: 'newPartName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.materialprice',
                    defaultMessage: '单价'
                }),
                dataIndex: 'price',
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.quantisCausedity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity',
                render: (text, record) => {
                    const validate = (!text || text === undefined) || text === 0 ? {validateStatus: 'error'} : null;
                    return (
                        <FormItem {...validate}>
                            <LocalizeInputNumber
                                min={1}
                                id={record.usedPartId}
                                precision={2}
                                value={text} onBlur={this.onUpdateQuantity}/>
                        </FormItem>
                    );
                }
            }, {
                title: materials.length > 0
                    ? (
                        <Popconfirm placement="topRight" title={formatMessage({
                            id: 'updatePanel.validation.isDelete',
                            defaultMessage: '是否确认全部删除？'
                        })} onConfirm={this.onDeleteMaterialAll} >
                            <a>{formatMessage({
                                id: 'updatePanel.validation.clear',
                                defaultMessage: '清空'
                            })}</a>
                        </Popconfirm>
                    )
                    : null,
                dataIndex: 'id',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: (text, record) => <a data-id={text} onClick={() => this.onDeleteMaterialDetail(record)}>{formatMessage({
                    id: 'updatePanel.validation.delete',
                    defaultMessage: '删除'
                })}</a>
            }
        ];
        const workItemColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.partCode',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'partCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.workItemCode',
                    defaultMessage: '维修项目编号'
                }),
                dataIndex: 'workItemCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.workItemName',
                    defaultMessage: '维修项目名称'
                }),
                dataIndex: 'workItemName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.laborHour',
                    defaultMessage: '工时'
                }),
                dataIndex: 'laborHour',
            },
            {
                title: formatMessage({
                    id: 'updatePanel.btn.clear',
                    defaultMessage: '操作'
                }),
                dataIndex: 'workItemId',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: text => (
                    <a data-id={text} onClick={this.onDeleteWorkItem}>
                        {formatMessage({
                            id: 'btn.delete',
                            defaultMessage: '删除'
                        })}
                    </a>
                )
            }
        ];
        const vehicleColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.vin',
                    defaultMessage: 'VIN'
                }),
                dataIndex: 'vin',
            },
            {
                title: formatMessage({
                    id: 'updatePanel.colums.dutyDealerName',
                    defaultMessage: '责任服务站'
                }),
                dataIndex: 'dutyDealerName',
                render: (text, record) => (
                    <SearchInput
                        disabled={true}
                        value={record.dutyDealerName}
                        id={record.id}
                        onClickSearchBtn={() => this.onClickAddNewDealerBtn(record.id)} />)
            }, {
                title: vehicles.length > 0
                    ? (
                        <Popconfirm placement="topRight" title={formatMessage({
                            id: 'updatePanel.validation.isDelete',
                            defaultMessage: '是否确认全部删除？'
                        })} onConfirm={this.onDeleteVehicleAll} >
                            <a>{formatMessage({
                                id: 'updatePanel.validation.clear',
                                defaultMessage: '清空'
                            })}</a>
                        </Popconfirm>
                    )
                    : null,
                dataIndex: 'id',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: (text, record) => <a data-id={text} onClick={() => this.onDeleteVehicleDetail(record)}>{formatMessage({
                    id: 'updatePanel.validation.delete',
                    defaultMessage: '删除'
                })}</a>
            }
        ];
        // const dealerColumns = [
        //     {
        //         title: this.props.intl.formatMessage({
        //             id: 'updatePanel.colums.dealerCode',
        //             defaultMessage: '服务站编号'
        //         }),
        //         dataIndex: 'dealerCode',
        //     },
        //     {
        //         title: this.props.intl.formatMessage({
        //             id: 'updatePanel.colums.dealerName',
        //             defaultMessage: '服务站名称'
        //         }),
        //         dataIndex: 'dealerName',
        //     },
        //     {
        //         title: this.props.intl.formatMessage({
        //             id: 'updatePanel.colums.quota',
        //             defaultMessage: '配额台数'
        //         }),
        //         dataIndex: 'quota',
        //         render: (text, record) => {
        //             const validate = (!text || text === undefined) || text === 0 ? {validateStatus: 'error'} : null;
        //             return (
        //                 <FormItem {...validate}>
        //                     <LocalizeInputNumber
        //                         min={1}
        //                         id={record.id}
        //                         precision={2}
        //                         value={text} onBlur={this.onUpdateQuantity}/>
        //                 </FormItem>
        //             );
        //         }
        //     }, {
        //         title: dealerQuotas.length > 0
        //             ? (
        //                 <Popconfirm placement="topRight" title={formatMessage({
        //                     id: 'updatePanel.validation.isDelete',
        //                     defaultMessage: '是否确认全部删除？'
        //                 })} onConfirm={this.onDeleteDealerQuotaAll} >
        //                     <a>{formatMessage({
        //                         id: 'updatePanel.validation.clear',
        //                         defaultMessage: '清空'
        //                     })}</a>
        //                 </Popconfirm>
        //             )
        //             : null,
        //         dataIndex: 'id',
        //         fixed: 'right',
        //         width: FIXED_COLUMN_WIDTH,
        //         render: (text, record) => <a data-id={text} onClick={() => this.onDeleteDealerQuotaDetail(record)}>{formatMessage({
        //             id: 'updatePanel.validation.delete',
        //             defaultMessage: '删除'
        //         })}</a>
        //     }
        // ];
        const conditionsColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.conditionName',
                    defaultMessage: '条件名称'
                }),
                dataIndex: 'conditionName',
                width: '200px',
                render: (text, r) => <FormItem validateStatus={isValidate && !r.conditionName ? 'error' : null}>
                    <WrappedSelect options={conditionNameOptions}
                        value={text}
                        id={r.id}
                        onChange={this.onUpdateConditionName}/>
                </FormItem>
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.operator',
                    defaultMessage: '运算符'
                }),
                width: '200px',
                dataIndex: 'operator',
                render: (text, r) => r.conditionName === conditionName.产品分类 || r.conditionName === conditionName.产品编号
                    ? conventEnumValueToString(operator, operator.等于)
                    : <FormItem validateStatus={isValidate && !r.operator ? 'error' : null}>
                        <WrappedSelect options={operatorOptions}
                            value={text}
                            id={r.id}
                            onChange={this.onUpdateOperator}/>
                    </FormItem>
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'updatePanel.colums.value',
                    defaultMessage: '值'
                }),
                dataIndex: 'value',
                render: (text, r) => {
                    if(r.conditionName === conditionName.产品编号)
                        return (
                            <div>
                                <Button data-id={r.id} size="small" onClick={this.onShowProductSelectPanel}>
                                    <Icon type="plus" />
                                </Button>
                                <Badge status={r.conditionValues && r.conditionValues.length > 0 ? 'success' : 'error'} />
                            </div>);
                    if(r.conditionName === conditionName.产品分类)
                        return (
                            <div>
                                <Button data-id={r.id} size="small" onClick={this.onShowCategorySelectPanel}>
                                    <Icon type="plus" />
                                </Button>
                                <Badge status={r.conditionValues && r.conditionValues.length > 0 ? 'success' : 'error'} />
                            </div>);
                    
                    return (<FormItem>
                        <WrappedDatePicker value={text} name={r.id} onChange={this.onUpdateDateValue}/>
                    </FormItem>);
                }
            },
            {
                title: conditions.length > 0
                    ? (
                        <Popconfirm placement="topRight" title={formatMessage({
                            id: 'updatePanel.validation.isDelete',
                            defaultMessage: '是否确认全部删除？'
                        })} onConfirm={this.onDeleteConditionAll} >
                            <a>{formatMessage({
                                id: 'updatePanel.validation.clear',
                                defaultMessage: '清空'
                            })}</a>
                        </Popconfirm>
                    )
                    : null,
                dataIndex: 'id',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: (text, record) => <a data-id={text} onClick={() => this.onDeleteConditionDetail(record)}>{formatMessage({
                    id: 'updatePanel.validation.delete',
                    defaultMessage: '删除'
                })}</a>
            }
        ];
        return (
            <div className="form-standard">
                <Spin spinning={this.state.loading}>
                    <Card title={formatMessage({
                        id: 'updatePanel.column.common',
                        defaultMessage: '基本信息'
                    })}>
                        <Form>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.code',
                                        defaultMessage: '编号'
                                    })}{...FORM_OPTIONS.item} validateStatus={isValidate && !data.code ? 'error' : null} required>
                                        {data.code}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.serviceName',
                                        defaultMessage: '名称'
                                    })} {...FORM_OPTIONS.item} validateStatus={isValidate && !data.serviceName ? 'error' : null} required>
                                        <TextInput
                                            name="serviceName"
                                            value={data.serviceName}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.serviceType',
                                        defaultMessage: '类型'
                                    })} {...FORM_OPTIONS.item} validateStatus={isValidate && !data.serviceType ? 'error' : null} required>
                                        <WrappedSelect
                                            allowClear
                                            name="serviceType"
                                            value={data.serviceType}
                                            options={typeOptions}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.brandName',
                                        defaultMessage: '品牌'
                                    })}{...FORM_OPTIONS.item}>
                                        {data.brandName}
                                    </FormItem>
                                </Col><Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.dealerName',
                                        defaultMessage: '总代'
                                    })}{...FORM_OPTIONS.item}>
                                        {data.dealerName}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.content',
                                        defaultMessage: '活动内容'
                                    })} {...FORM_OPTIONS.item} validateStatus={isValidate && !data.content ? 'error' : null} required>
                                        <TextInput
                                            name="content"
                                            value={data.content}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.chargeMode',
                                        defaultMessage: '计费模式'
                                    })} {...FORM_OPTIONS.item} validateStatus={isValidate && !data.chargeMode ? 'error' : null} required>
                                        <WrappedSelect
                                            allowClear
                                            name="chargeMode"
                                            value={data.chargeMode}
                                            options={modeOptions}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'updatePanel.operation.frequency',
                                            defaultMessage: '单车可参加次数'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <WrappedInputNumber
                                            min={0}
                                            precision={0}
                                            name="frequency"
                                            value={data.frequency}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'updatePanel.operation.isRestrictedQuantity',
                                            defaultMessage: '是否限制台次'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        required>
                                        <WrappedSwitch id="isRestrictedQuantity"
                                            checked={data.isRestrictedQuantity}
                                            onChange={this.onChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'updatePanel.operation.serviceQuantity',
                                            defaultMessage: '可参加总台次'
                                        })}
                                        required={this.state.serviceQuantityIsRequired}
                                        validateStatus={isValidate && data.isRestrictedQuantity &&
                                            !data.serviceQuantity ? 'error' : null}
                                        {...FORM_OPTIONS.item}>
                                        <WrappedInputNumber
                                            min={0}
                                            precision={0}
                                            name="serviceQuantity"
                                            value={data.serviceQuantity}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'updatePanel.operation.contactPhone',
                                            defaultMessage: '工时费'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <InputAmount name="laborFee" disabled={data.chargeMode === chargeMode.固定费用}
                                            value={data.laborFee} onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'updatePanel.operation.materialFee',
                                            defaultMessage: '材料费'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <InputAmount name="materialFee" disabled={data.chargeMode === chargeMode.固定费用}
                                            value={data.materialFee} onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'updatePanel.operation.otherFee',
                                            defaultMessage: '其他费用'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <InputAmount name="otherFee" disabled={data.chargeMode === chargeMode.固定费用}
                                            value={data.otherFee} onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'updatePanel.operation.needMgmtFee',
                                            defaultMessage: '计算备件管理费'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        required>
                                        <WrappedSwitch id="needMgmtFee"
                                            checked={data.needMgmtFee}
                                            onChange={this.onChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'updatePanel.operation.scope',
                                            defaultMessage: '适用范围'
                                        })}
                                        {...FORM_OPTIONS.item} validateStatus={isValidate && !data.scope ? 'error' : null} required>
                                        <WrappedSelect
                                            allowClear
                                            name="scope"
                                            value={data.scope}
                                            options={scopeOptions}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'updatePanel.operation.startTime',
                                            defaultMessage: '开始时间'
                                        })}
                                        {...FORM_OPTIONS.item} validateStatus={isValidate && !data.startTime ? 'error' : null} required>
                                        <WrappedDatePicker
                                            name="startTime"
                                            value={data.startTime}
                                            onChange={this.onChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'updatePanel.operation.endTime',
                                            defaultMessage: '结束时间'
                                        })}
                                        {...FORM_OPTIONS.item} validateStatus={isValidate && !data.endTime ? 'error' : null} required>
                                        <WrappedDatePicker
                                            name="endTime"
                                            value={data.endTime}
                                            onChange={this.onChange}/>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'updatePanel.operation.remark',
                                        defaultMessage: '备注'
                                    })}
                                    {...FORM_ROW_OPTIONS.item}>
                                    <TextInput type="textarea" autosize={autosize} name="remark"
                                        value={data.remark} onBlur={this.onChange} />
                                </FormItem>
                            </Row>
                        </Form>
                    </Card>
                    <Card
                        title={this.props.intl.formatMessage({
                            id: 'updatePanel.materials.title',
                            defaultMessage: '维修材料清单属性列表'
                        })} extra={<div>
                            <Button
                                size="small"
                                onClick={this.onClickAddMaterialBtn}>
                                {formatMessage({
                                    id: 'updatePanel.btn.add',
                                    defaultMessage: '增加清单'
                                })}
                            </Button>
                        </div>}>
                        <Table className="white-space-nowrap"
                            rowKey="id"
                            columns={materialColumns}
                            pagination={true}
                            dataSource={materials}
                            {...TABLE} />
                    </Card>
                    <Card
                        title={this.props.intl.formatMessage({
                            id: 'updatePanel.workItems.title',
                            defaultMessage: '维修项目清单属性列表'
                        })}>
                        <Table className="white-space-nowrap"
                            rowKey="workItemId"
                            columns={workItemColumns}
                            pagination={true}
                            dataSource={workItems}
                            {...TABLE} />
                    </Card>
                    {data.scope === serviceActivityScope.指定车辆清单 && <Card
                        title={this.props.intl.formatMessage({
                            id: 'updatePanel.vehicle.title',
                            defaultMessage: '服务活动指定车辆清单列表'
                        })} extra={<div>
                            <Button
                                size="small"
                                onClick={this.onClickAddVehicleBtn}>
                                {formatMessage({
                                    id: 'updatePanel.btn.add',
                                    defaultMessage: '增加清单'
                                })}
                            </Button>
                            <Button key="import" size="small" onClick={this.onShowImportSelectPanel}>
                                {this.props.intl.formatMessage({
                                    id: 'updatePanel.vehicle.addDetail',
                                    defaultMessage: '批量导入车辆清单'
                                })}</Button>
                        </div>}>
                        <Table className="white-space-nowrap"
                            rowKey="id"
                            columns={vehicleColumns}
                            pagination={true}
                            dataSource={vehicles}
                            {...TABLE} />
                    </Card>
                    }
                    {(data.scope === serviceActivityScope.指定车辆条件
                    // || data.scope === serviceActivityScope.指定车辆条件与经销商配额
                    ) && <Card
                        title={this.props.intl.formatMessage({
                            id: 'updatePanel.conditions.title',
                            defaultMessage: '服务活动条件清单列表'
                        })} extra={<div>
                            <Button
                                size="small"
                                onClick={this.onClickAddConditionBtn}>
                                {formatMessage({
                                    id: 'updatePanel.btn.add',
                                    defaultMessage: '增加清单'
                                })}
                            </Button>
                        </div>}>
                        <Table className="white-space-nowrap"
                            rowKey="id"
                            columns={conditionsColumns}
                            pagination={true}
                            dataSource={conditions}
                            {...TABLE} />
                    </Card>
                    }
                    {/* {data.scope === serviceActivityScope.指定车辆条件与经销商配额 && <Card
                        title={this.props.intl.formatMessage({
                            id: 'updatePanel.dealer.title',
                            defaultMessage: '服务站配额清单列表'
                        })} extra={<div>
                            <Button
                                size="small"
                                onClick={this.onClickAddDealerBtn}>
                                {formatMessage({
                                    id: 'updatePanel.btn.add',
                                    defaultMessage: '增加清单'
                                })}
                            </Button>
                        </div>}>
                        <Table className="white-space-nowrap"
                            rowKey="id"
                            columns={dealerColumns}
                            pagination={true}
                            dataSource={dealerQuotas}
                            {...TABLE} />
                    </Card>
                    } */}
                    <Card className={styles.optionBtn}>
                        <Button
                            type="primary"
                            onClick={this.onSubmit}
                            loading={loading}>
                            {formatMessage({
                                id: 'updatePanel.operation.onSubmit',
                                defaultMessage: '保存'
                            })}
                        </Button>
                    </Card>
                </Spin>
                {
                    this.state.showImportPanel &&
                    <Modal title={this.props.intl.formatMessage({
                        id: 'updatePanel.importModal.title',
                        defaultMessage: '批量导入车辆清单'
                    })}
                    width="40%"
                    maskClosable={false}
                    footer={null}
                    destroyOnClose={true}
                    visible={this.state.showImportPanel}
                    onCancel={this.onShowImportSelectPanel}>
                        <FileImport
                            onImportOk={this.onCheckVin}/>
                    </Modal>
                }
                {
                    this.state.showPartMultiSelectPanel && <PartMultiSelectPanel
                        currentSelectRowkeys={materials}
                        selectKey={materials.id}
                        onCancel={this.onClickAddMaterialBtn}
                        onSelect={this.onSelectMaterials} />
                }
                {
                    this.state.showSelectPartPanel && <PartSelectPanel
                        onCancel={this.onClosePartSelectPanel}
                        onSelect={this.onSelectParts}
                        usedPartId={data.usedPartId}/>
                }
                {
                    this.state.showVehicleSelectPanel && <VehicleSelectPanel
                        selectKey={vehicles.id}
                        onCancel={this.onClickAddVehicleBtn}
                        onSelect={this.onSelectVehicleSolds} />
                }
                {
                    this.state.showSelectDutyDealerPanel && <DutyDealerSelectPanel
                        onCancel={this.onCloseDutyDealerSelectPanel}
                        onSelect={this.onSelectDutyDealers}/>
                }
                {
                    this.state.showSelectDealerPanel && <DealerSelectPanel
                        selectKey={dealerQuotas.id}
                        onCancel={this.onCloseDealerSelectPanel}
                        onSelect={this.onSelectDealers}/>
                }
                {
                    this.state.showProductSelectPanel &&
                    <Modal title={this.props.intl.formatMessage({
                        id: 'conditionEditPanel.showProductSelectPanel',
                        defaultMessage: '产品查询'
                    })}
                    width="70%"
                    footer={null}
                    maskClosable={false}
                    visible={this.state.showProductSelectPanel}
                    onCancel={this.onShowProductSelectPanel}>
                        <ProductSearchPanel
                            data={conditions}
                            currentId={this.state.currentId}
                            selectData={this.onSelectProductData}
                            onCancel={this.onShowProductSelectPanel}/>
                    </Modal>
                }
                {
                    this.state.showCategorySelectPanel &&
                    <Modal title={this.props.intl.formatMessage({
                        id: 'conditionEditPanel.showCategorySelectPanel',
                        defaultMessage: '车型查询'
                    })}
                    width="70%"
                    footer={null}
                    maskClosable={false}
                    visible={this.state.showCategorySelectPanel}
                    onCancel={this.onShowCategorySelectPanel}>
                        <ProductCategorySearchPanel
                            data={conditions}
                            currentId={this.state.currentId}
                            selectData={this.onSelectCategoryData}
                            onCancel={this.onShowCategorySelectPanel}/>
                    </Modal>
                }
                <div className="page-toolbar">
                    <Return
                        disabled={this.state.loading}
                        onConfirm={this.onClickOkOnPopconfirm}
                        showWarning={this.state.hasOperat} />
                </div>
            </div>
        );
    }
}

UpdatePanel.propTypes = {
    successReturn: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    onSelect: PropTypes.func.isRequired,
    history: PropTypes.object,
    id: PropTypes.string,
    intl: PropTypes.object,
};

import {connect} from 'react-redux';
import {
    tableSearch,
} from './actions';

const mapDispatchToProps = (dispatch, props) => ({
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(null, mapDispatchToProps)(injectIntl(UpdatePanel));
